<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		.box {
			width: 400px;
			height: 150px;
			border: 1px solid black;
			background: #ccc;
			position: absolute;
			margin-left: -200px;
			margin-top: -75px;
			left: 50%;
			top: 50%;
			text-align: center;
			line-height: 150px;
			display: none;
		}
		.list {
			overflow: hidden;
		}
		.list li{
			float: left;
			width: 200px;
			height: 200px;
			border: 3px solid #666;
			list-style: none;
			margin: 10px;
			position: relative;
		}
		.list img {
			width: 100%;
			height: 100%;
			display: block;
		}
		.del_btn {
			position: absolute;
			right: 0;
			top: 0;
		}
	</style>
	<script>
		window.onload = function() {
			let oBox = document.querySelector('.box');
			let oUl = document.querySelector('.list');
			let btn = document.querySelector('.btn');
			let timer;

			// 将图片拖拽到页面中
			document.addEventListener('dragover', (ev) => {
				clearTimeout(timer);
				oBox.style.display = 'block';
				// 拖动文件离开页面后就让oBox消失
				timer = window.setTimeout(function() {
					oBox.style.display = 'none';
				},500)
				ev.preventDefault();   // 阻止默认事件
			}, false)

			// 拖拽到box内
			oBox.addEventListener('dragenter', () => {
				oBox.innerHTML = '松手上传';
			}, false)

			// 从box内拖拽离开
			oBox.addEventListener('dragleave', () => {
				oBox.innerHTML = '请拖到这里';
			}, false)

			// 拖拽到box中并且松手触发
			oBox.addEventListener('drop', (ev) => {
				Array.from(ev.dataTransfer.files).forEach(file => {
					if (!file.type.startsWith('image/')) {
						return;
					}
					let reader = new FileReader();
					reader.onload = function() {
						let oLi = document.createElement('li');
						oLi.file = file;
						oLi.innerHTML = `<img src="" alt=""><a href="javascript:;" class="del_btn">删除</a>`;
						let oImg = oLi.querySelector('img');
						let del_btn = oLi.querySelector('a');
						oImg.src = this.result;
						oUl.appendChild(oLi);
						del_btn.onclick = function() {
							oUl.removeChild(oLi);
						}
					}
					reader.readAsDataURL(file);
				});

				ev.preventDefault();   // 阻止默认事件
			}, false)

			// 如果拖到oBox之外的区域也不要打开拖拽的文件
			document.addEventListener('drop', (ev) => {
				ev.preventDefault();
			}, false)

			btn.onclick = function() {
				let data = new FormData();
				Array.from(oUl.children).forEach(li => {
					data.append('fl', li.file);
				})
				let xhr = new XMLHttpRequest();
				xhr.open('post', 'http://localhost:8080/api', true);
				// 上传文件的进度
				xhr.upload.addEventListener('progress', function(ev) {
					let m1 = document.querySelector('#m1');
					m1.value = ev.loaded / ev.total * 100
				})

				xhr.send(data);
				xhr.onreadystatechange = function() {
					if (xhr.readyState == 4) {
						if (xhr.status >= 200 && xhr.status < 300 || status == 304) {
							alert('上传成功')
						} else {
							alert('上传失败')
						}
					}
				}
			}
		}
	</script>
</head>
<body>
	<meter id="m1" min='0' max='100' style="width:100%"></meter>
	<ul class="list">
	</ul>
	<input type="button" value="上传" class="btn">
	<div class="box">
		请拖到这里
	</div>
</body>
</html>